<template>
  <div class="item" data-type="select" v-bind:class="[('w'+obj.property.selfWidth)]">
      <div class="hd" v-bind:class="[('i'+obj.property.titleWidth+'d6')]">
        <label class="tit">{{obj.property.title}}</label>
        <span class="required" v-show="obj.property.required">*</span>
        <span class="block muted">{{obj.property.intro}}</span>
        <v-handle v-bind:handle="obj.handle"></v-handle>
      </div>
      <div class="bd" v-bind:class="[('i'+(obj.property.titleWidth==6?6:6-obj.property.titleWidth)+'d6')]">
        <!--<select v-on:change="change_select(i,$event)" v-bind:class="[('i'+(6/obj.property.multiSelect.levels.length)+'d6')]" v-for="(level,i) in obj.property.multiSelect.levels">
          <option value='' disabled selected style='display:none;'>请选择</option>
          <option v-for="option in obj.property.multiSelect.options" v-if="i==0" v-model="option.text">{{option.text}}</option>
          <option v-for="option in twoOptions" v-if="i==1" v-model="option.text">{{option.text}}</option>
          <option v-for="option in threeOptions" v-if="i==2" v-model="option.text">{{option.text}}</option>
        </select>-->
        <el-cascader :options="obj.property.multiSelect.options" filterable change-on-select></el-cascader>
      </div>
    </div>
</template>

<script>
export default {
  props: ['obj'],
  data:function(){
    return {
      twoOptions:[],
      threeOptions:[],
      firstSelected:'',
      twoSelected:'',
      threeSelected:''
    }
  },
  methods:{
    change_select:function(level,event){
      var value = event.target.value;
      var allOptions = this.obj.property.multiSelect.options;
      if(level==0){
        this.firstSelected = value
        var selectedOption = this.findOption(allOptions,value)
        this.twoOptions = selectedOption.childs
      }
      
      if(level == 1){
        this.twoSelected=value
        //找第一级
        var firstOption = this.findOption(allOptions,this.firstSelected)
        //找第二级
        var twoOption = this.findOption(firstOption.childs,value)
        this.threeOptions=twoOption.childs
      }
      
      if(level == 2){
        this.threeSelected=value
      }
      
    },
    
    findOption(options,text){
      var selectedOption = {childs:[]}
      options.forEach(function(option,i){
        if(option.text==text){
          selectedOption = option
        }
      })
      return selectedOption
    }
  }
}
</script>
